import React, { useEffect, useState ,Key} from "react";
import { Button, Card, Checkbox, Form, Input, Space, Table, Tag,  message, Tooltip} from 'antd';
import { StarOutlined, StarFilled, StarTwoTone, SearchOutlined,DeleteOutlined,EditOutlined  } from '@ant-design/icons';
import style from './index.module.css'
import { useNavigate } from 'react-router-dom';

//引入api中请求的方法
import { getHosSetListRequest,
  deleteHosSetFromIdRequest,
  batchDeleteHosRequest} from '@/api/hospital/hospitalSet';
//引入类型
import type { getHosSetListRecordsType,getHosSetListItemsType } from '@/api/hospital/model/userType'
import type {searchHosFinishPraType} from './types'

export default function HospitalSet() {
    //使用编程式路由导航hook
  const navigate = useNavigate();
  //  data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
  // dataIndex和真实数据进行一 一对应 每一个对象的key和columns中的dataIndex一 一对象展示数据
  const [tableData, setTableData] = useState<getHosSetListRecordsType>([]);
   //定义current(当前页码)的state[useState的泛型根据我们传入的参数推论出来了]
   const [current, setCurrent] = useState(1) ;
   //定义total(总个数)的state
    const [total,setTotal] = useState(0);
   //定义pageSize(每页的数量)的state
    const [pageSize,setPageSize] = useState(3);
     //定义isLoading(table表格样式的第三部分内个表格是否加载中)
    const [isLoading,setIsLoading] = useState(false);
    //为了不写到useEffect第二个参数[] 就写到这  这个是hoscode hosname
    const [fieldValue,setFieldValue] = useState<searchHosFinishPraType>({});
    //定义一个状态state,专门用来触发useEffect的执行,重新加载 (删除后重新渲染)
    const [reRender,setRender] = useState(true);
    //定义一个控制批量删除按钮的一个状态 默认是true是禁用的意思
    const [isSelect,setIsSelecte] = useState(true);
    //定义一个保存批量选中的ids的状态 默认是空数组
    const [batchSelectIds,setBatchSelectIds] = useState<Key[]>([]);
    //定义一个医院列表
    const [hospitalList, setHospitalList] = useState([]);
     //当组件开始加载的时候,开始请求分页列表的数据
     //注意:异步函数不能作为useEffect的参数,因为useEfferct可能会书写return一个函数期到清理作用,如果是异步函数,则就return就是异步的了 不能写return一个函数
     //多练习这个userEffect
  useEffect(() => {
    //在请求开始之前,设置isLoading为true
    setIsLoading(true)
    //封装一个请求函数才可以,记得后续调用
    const getHosSetList = async () => {
      //console.log(222);
      //result就是拿到的数据
      const result = await getHosSetListRequest({
        page: current,
        limit: pageSize,
        ...fieldValue
        //...fieldValue  //合并对象直接拿过来  hosname   hoscode
      });
         setHospitalList(result.records as any)
        console.log(result, "result");
      // //1.把得到的结果中records数据(医院列表的数组)设置给state
         setTableData(result.records)
      // //2.把得到的结果中 数据的总长度设置给state
          setTotal(result.total)
      // 请求完成后要把isLoading修改为false 
          setIsLoading(false)
    }
    getHosSetList();  //你不调用怎么有数据??  括号里写当他俩发生改变就重新发送请求
  }, [current,pageSize,fieldValue,reRender])

  //columns是字段有序号...
//columns 控制表格的字段有哪些 title属性就是当前字段名称,data就是用来和将来的数据进行一一对应的  就是你请求数据返回的数据 postman
//render函数的第三个参数是当前的数据下标(试出来的)
 /* columns这是数据 antdesign 根据数据生成下面结构 正常情况下columns应该有key 但是书写了dataIndex 则可以省略key 所以我们每一个都编译一个dataindex*/
  const columns = [
    {
      title: '序号',
      width:60,
      dataIndex: 'name',
      //一定要返回真实的数据用render 序号不需要真实数据所以直接下标就好了  return如果一句可以简写省略
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },

//不能将类型..........一大串这种报错 'right' as 'right'我知道这是个right 类型断言
//这是最后一列的的俩按钮
    {
      title: '操作',
      dataIndex: 'name',
      fixed: 'right' as 'right',
      // 要拿取按钮中id 肯定要取columns里 根据渲染不同在上面
      render(a:any,data:getHosSetListItemsType) {
        //console.log(a,'aaa'); //这是个undfid
       // console.log(b,'bbb');//这是完整的数据 改成了getHosSetListItemsType(每个item类型)
       const {id} = data;
        return (
          <div>
            <Tooltip title="修改">
            <Button
             type='primary' 
            className={style.mr} 
             icon={<EditOutlined />} 
             onClick={ () => {navigate(`/syt/hospital/updatehosset/${id}`)}}
            //  用的params传参需要在路由里进行修改
             > 
             </Button>
             </Tooltip>
             <Tooltip title="删除">
            <Button
             type='primary'
             danger 
             icon={<DeleteOutlined />}
             onClick={deleteHosHandle(id)}
             ></Button>
                </Tooltip>
          </div>
        )
      }
    }
  ];

//事件回调函数
//1.点击页码以后事件回调
const pageChangeHandle = (current:number,pageSize:number) =>{
//参数1current:当前点击页码 参数2:pageSize:每页条数 这俩参数自己测出来的
//点击以后给state设置page和pageSize的值
  setCurrent(current)
  setPageSize(pageSize)
}

//2.点击查询提交表单事件回调函数 
// const searchHoFinish =(a:any,b:any)=>{
//   console.log(a,b); 打印一下看一下才能知道写什么参数  发现只用写一个参数
// }
//antdesig 里面的getFieldValue 获取对应字段名的值 打印出来是对象因为它是对象待声明对象
interface searchHosFinishPraType {
  hosname?:string,
  hoscode?:string
  //因为下面Form表单name 是这两个 逻辑也是根据这两个进行搜索s
}

//参数是收集当前表单的值 组成的对象 onFinish事件
 const searchHoFinishHandle =(fieldValue:searchHosFinishPraType ) => {
  searchHoFinishHandle(fieldValue)
 }

  //3.添加医院事件回调函数
  const addHosHandle = () => {
    //编程式路由导航跳转
    navigate("/syt/hospital/addhosset") 
  }

//4.删除单个医院的事件回调函数 传参怎么拿到id return事件函数 柯里化写法
const deleteHosHandle = (id:number) => {
  return async () => {
    //调用删除接口
  await deleteHosSetFromIdRequest(id);
  //重新渲染
  setRender(!reRender)
  message.success("删除数据成功")
 
  }
}

//5.批量删除按钮事件回调函数
const batchDeleteHandle = async () => {
  //发送批量删除请求
  await batchDeleteHosRequest(batchSelectIds)
  message.success('批量删除成功')
     
  //重新渲染
  setRender(!reRender) 
  //把批量删除按钮恢复
  setIsSelecte(true)
}
  return (
    <div className={style.outer}>
      {/* Card是常用于最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面给上面间隔空间。 */}
      <Card>
      <Form
        name="basic"
        layout='inline'
        labelCol={{ span: 30 }}
        wrapperCol={{ span: 16 }}
        onFinish={searchHoFinishHandle}
        // onFinish只有一个参数 鼠标放上去就能看到
        //wrapperCol={{ span: 16 }}宽度
      //autoComplete="off"//记录你上次提交的 然后你再进入会有一个提示
      //Form.Item控制label
      //   rules校验规则 必填required: true  message: 'Please input your username!'占位符
      //name值是收集表单信息才用到 name="username"
      >
        <Form.Item
          // label="医院"
          // name="username"
          // rules={[{ required: true, message: 'Please input your username!' }]}
          name='hosname'
        >
          <Input placeholder="医院名称" />
          {/* initialValues={{username:'laowang',password:'123'}} 然后对象的key和name一一对应填入表单中 */}
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password placeholder="医院编号" />
        </Form.Item>
          {/*onFinish 提交表单切数据验证成功后回调事件 */}
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary"  htmlType="submit" icon={<SearchOutlined />} >
            {/* onFinish={searchHoFinishHandle}这是实例不能写道这待写到form表单 */}
            查询
          </Button>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>
      {/* 第二部分东西如下 清空按钮的功能是自动完成的不需要你写 这个部分是添加和批量删除 */}
      <div className={style.mt}>
        <Button type="primary" className="mr" onClick={addHosHandle}>添加 </Button>
        <Button type='primary' danger disabled={isSelect} onClick={batchDeleteHandle} >批量删除</Button>
      </div>
    {/* 第三部分如下 */}
    {/* {{ x: 1100 }}两个括号意思第一个外层是jsx环境 第二个括号是对象类型 */}
    {/* 解决不了问题就看antadesign下面的注意事项rowkey指定key */}
    {/*         rowKey='id' 这样添加就不为空 id唯一  */}
      <Table
        className={style.mt}
        //上面columns是数据 下面是样式
        columns={columns}
        dataSource={tableData}
        loading={isLoading}
        // rowSelection表格行是否选择就是前面多选
        rowSelection={{
          //函数前面写async
          onChange(ids:Key[],){
            //console.log(a,b); 测出来参数一是id  参数二data(可以不写) 选择的详细数据  datas: getHosSetListItemsType[]
            //onChange类型是内部封装的类型Key   onChange	选中项发生变化时的回调
            //设置控制批量删除按钮state的状态   !ids.length就是true或false 因为0 false或者1 true
             setIsSelecte(!ids.length);   
           //当选项框被修改的时候,实时修改保存所有被选中id的状态
            setBatchSelectIds(ids);
    
           }
        }}  
        //报key错误给他个id
        rowKey='id'
        scroll={{ x: 1100 }}  //滚动条x轴
        bordered  //表格竖线
        //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowkey属性之地那个dataSource中单的一个属性作为key
        pagination={{
          //pagination分页
          //页码的配置：当前页码
          current,
          //总数据的数量
          total,
          //每页条数
          pageSize,
          //展示更改每页条数的选项(默认total大于50条的时候开启)
          pageSizeOptions: [2, 3, 4, 5],
          //是否直接开启更新每页条数的选项
          showSizeChanger: true,
          showTotal(total){
            return `总共有${total}数据`
          },
        onChange:pageChangeHandle
        }}
      />
      </Card>
    </div>
  )
}

